<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { throttle, timeFormat } from '../../utils/zml'
import { ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'

const route = useRoute(), router = useRouter()
const data = reactive({
    detail: {
        id: '',
        name: '猪八戒',
    },
    againList: [
        {id: 0, name: '人间道', num: 120, rotate_s: 0, rotate_e: 60},
        {id: 1, name: '地狱道', num: 130, rotate_s: 60, rotate_e: 120},
        {id: 2, name: '天神道', num: 150, rotate_s: 120, rotate_e: 180},
        {id: 3, name: '饿鬼道', num: 80, rotate_s: 180, rotate_e: 240},
        {id: 4, name: '修罗道', num: 70, rotate_s: 240, rotate_e: 300},
        {id: 5, name: '畜生道', num: 200, rotate_s: 300, rotate_e: 0},
    ],
    aniRotate: 0,
    aniTransition: true,
    againResultList: [
        {id: 1, name: "猪八戒", index: '第1世', role: '畜生', time: timeFormat()},
        {id: 2, name: "猪八戒", index: '第2世', role: '畜生', time: timeFormat()},
        {id: 3, name: "猪八戒", index: '第3世', role: '畜生', time: timeFormat()},
        {id: 4, name: "猪八戒", index: '第4世', role: '畜生', time: timeFormat()},
        {id: 5, name: "猪八戒", index: '第5世', role: '畜生', time: timeFormat()},
        {id: 6, name: "猪八戒", index: '第6世', role: '畜生', time: timeFormat()}
    ]
})

// 生命周期
onMounted(() => {
    // 获取传递的id，用来请求数据
    data.detail.id = route.params.id as string
    // echart条形图
    getAgainEchart()
})

// 开始轮回（需要节流）
const Reincarnation = () => {
    throttle(() => {
        data.aniRotate = Math.floor(Math.random() * 1800 + 1800)
        let surplus = data.aniRotate % 360
        data.aniTransition = true
        setTimeout(() => {
            data.againList.forEach((item: any, index: number) => {
                if(surplus >= item.rotate_s && surplus < item.rotate_e) {
                    ElMessageBox.alert('恭喜猪八戒轮回转世为：' + item.name, '提示', {
                        callback: () => {
                            item.num += 10
                            data.aniTransition = false
                            data.aniRotate = 0
                            data.againResultList.push({
                                id: Number(data.detail.id),
                                name: data.detail.name,
                                index: `第${index + 1}世`,
                                role: item.name,
                                time: timeFormat()
                            })
                            getAgainEchart()
                        }
                    })
                }
            })
        }, 2000);
    }, 2500)
}
// 绘制条形图
const getAgainEchart = () => {
    let mychart = echarts.init(document.getElementById("againEchart") as HTMLElement, 'dark')
    mychart.setOption({
        backgroundColor: 'rgb(18,18,18)',
        title:{
            text: '总轮回数',
        },
        tooltip: {
            show: true
        },
        grid: {
            left: '5%',
            right: '0%',
            top: '15%'
        },
        xAxis: {
            type: 'category',
            data: data.againList.map(item => { return item.name })
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data.againList.map(item => { return item.num }),
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    })
}
</script>

<template>
    <div class="lunhui-page z-flex-column">
        <el-page-header :icon="ArrowLeft" title="返回" :content="data.detail.name+'的轮回'" @back="router.back()" />
        <div class="lunhui-page-container z-flex z-flex-1">
            <div class="lunhui-page-left z-flex-1 z-flex-center z-flex-column">
                <div class="lunhui-page-box z-rela">
                    <div class="dish" :style="{'transform': `rotate(-${data.aniRotate}deg)`, 'transition': data.aniTransition?'all 2s ease':''}">
                        <div class="block" v-for="item in data.againList" :key="item.id">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div>
                        <div class="light" v-for="item in 12" :key="item"></div>
                    </div>
                    <div class="pointer"></div>
                </div>
                <el-button type="primary" class="z-m-t-50" size="large" :disabled="false" @click="Reincarnation">开始轮回</el-button>
            </div>
            <div class="lunhui-page-right z-flex-column z-flex-1 z-border-left z-p-l-40 z-p-r-40">
                <div class="z-flex-1">
                    <div id="againEchart" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="z-flex-1">
                    <el-table :data="data.againResultList" style="width: 100%;" max-height="374" border>
                        <el-table-column prop="id" label="ID" width="100" align="center" />
                        <el-table-column prop="name" label="轮回者" width="180" align="center" />
                        <el-table-column prop="index" label="轮回次" width="180" align="center" />
                        <el-table-column prop="role" label="轮回角色" align="center" />
                        <el-table-column prop="time" label="轮回时间" align="center" />
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.lunhui-page {
    width: 100%;
    height: 100%;
}
.lunhui-page-container {
    padding-top: 20px;
    .lunhui-page-left {
        height: calc(100vh - 144px);
    }
    .lunhui-page-box {
        border: 20px solid #111;border-radius: 50%;
        
        .pointer { width: 0;height: 0;border-top: 60px solid rgb(153, 102, 0);border-right: 30px solid transparent;border-bottom: 0px solid transparent;border-left: 30px solid transparent;position: absolute;top: -20px;left: 50%;transform: translateX(-50%);z-index: 2;}
        .dish {
            width: 400px;height: 400px;overflow: hidden;position: relative;border-radius: 50%;
            .block {
                width: 200px;height: 200px;position: absolute;transform-origin: right bottom 0;

                &:nth-child(even){ background-color: rgb(0,153,255); }
                &:nth-child(odd){ background-color: rgb(0,204,102); }
                @for $i from 1 to 7 {
                    &:nth-child(#{$i}){ transform: rotate(#{$i * 60}deg) skewY(30deg); }
                }

                span{ width: 30px;display: block;position: absolute;transform-origin: center center 0;transform: rotate(-39deg) skewY(-11deg) translate(46px, 155px);font-size: 20px;color: #fff;font-weight: bold; }
            }
        }
        .light{
            width: 10px;height: 10px;border-radius: 100px;position: absolute;top: -15px;left: 49%;transform-origin: 50% 215px 0;
            @for $i from 0 to 13 {
                &:nth-child(#{$i + 1}){transform: rotate(#{$i * 30}deg);}
                @if $i % 2 == 0 {
                    &:nth-child(#{$i + 1}){ background: rgb(255,102,102);animation: lightFlash1 .5s linear infinite; }
                }@else {
                    &:nth-child(#{$i + 1}){ background: transparent;animation: lightFlash2 .5s linear infinite; }
                }
            }
        }
    }
}

@keyframes lightFlash1 {
    to{ background: transparent; }
}
@keyframes lightFlash2 {
    to{ background: rgb(255,102,102); }
}
</style>